<template>
  <div class="wrapper">
    <el-breadcrumb>
      <el-breadcrumb-item>房型管理</el-breadcrumb-item>
      <el-breadcrumb-item>可用房查询</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true"
        class="demo-form-inline">
        <el-form-item label="日期：">
          <el-date-picker align="right"
            type="date"
            placeholder="选择日期"
            @change="searchByDate"
            v-model="startTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            :clearable="false"
            :editable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button :type="!_isClisk ? 'primary' :'info'"
            size="small"
            :disabled="_isClisk"
            @click="pre">上一页</el-button>
          <el-button type="primary"
            size="small"
            @click="next">下一页</el-button>
        </el-form-item>
      </el-form>
      <table class="table"
        cellspacing="0"
        v-if="roomHeadList.length">
        <tr class="style">
          <td rowspan="2">房型</td>
          <td rowspan="2">房数</td>
          <td colspan="4"
            v-for="(item,index) in  dateList"
            :key="index"> {{item}}</td>
        </tr>
        <tr class="style">
          <td v-for="(item,index) in  typeListStr"
            :key="index">{{item}}</td>
        </tr>
        <tr v-for="(item,index) in roomHeadList"
          :key="index">
          <td>{{item.name}}</td>
          <td>{{item.roomNum}}</td>
          <td v-for="(subItem,i) in countList[index]"
            :key="i">{{subItem == 0 ? '-' : subItem}}</td>
        </tr>
        <tr class="style">
          <td>合计</td>
          <td>{{roomSum}}</td>
          <td v-for="(item,index) in sumList"
            :key="index">{{item == 0 ? '-' : item}}</td>
        </tr>
        <tr>
          <td colspan="2"
            class="style">维修</td>
          <td v-for="(item,index) in maintainList"
            :key="index"
            colspan="4">{{item}}</td>
        </tr>
        <tr>
          <td colspan="2"
            class="style">当前出租率</td>
          <td v-for="(item,index) in nowRentList"
            :key="index"
            colspan="4">{{item}}</td>
        </tr>
        <tr>
          <td colspan="2"
            class="style">预计出租率</td>
          <td v-for="(item,index) in setoutRentList"
            :key="index"
            colspan="4">{{item}}</td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import { getRoomSelect, getRoomSelectType } from "@/public/js/search_room";
import { format } from "@/public/js/util";
export default {
  components: {},
  props: {},
  data() {
    return {
      roomHeadList: [],
      roomSelectType: [],
      countList: [],
      dateList: [],
      typeListStr: [],
      startTime: format(new Date().getTime(), "yyyy-MM-dd"),
      _startTime:'',
      roomId: "",
      roomSumList: [],
      sumList: [],
      roomSum: "",
      page: "",
      maintainList: [], //维修数据
      nowRentList: [], //当前出租率
      setoutRentList: [], //预计出租率
      //日期选择限制范围
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      isClisk: false,
      //时间戳列表
      dateHandleListTamp: [],
      dateHandleList: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //格式化数据
    _formatCount() {
      this.countList = [];
      this.typeListStr = [];
      this.sumList = [];
      this.roomHeadList.forEach(item => {
        let _middleArray = [];
        this.dateList = [];
        this.dateHandleListTamp = [];
        this.dateHandleList = [];
        item.roomCotentList.forEach(i => {
          _middleArray.push(i.sellNum, i.setout, i.occupy, i.leave);
          this.dateList.push(`${i.date}(${i.week})`);
          this.dateHandleListTamp.push(i.dateLong);
          this.dateHandleList.push(i.date);
          this.startTime = this.dateHandleList[0];
        });
        this.countList.push(_middleArray);
      });
      this._setTypeListStr(this.dateList.length);

      //合计
      let sum = [];
      this.countList[0].forEach(()=>{
        sum.push(0)
      })
      this.countList.forEach((item, index) => {
        item.forEach((v,i)=>{
          sum[i]+= parseInt(v);
        })
      });
      this.sumList = sum
    },
    //事务类型
    _setTypeListStr(len) {
      for (let i = 0; i < len; i++) {
        this.typeListStr.push("可卖", "预抵", "占用", "预离");
      }
    },
  
    // 日期查询
    searchByDate(val) {
      this.startTime = val;
      this.page = "";
      this._getRoomSelect();
      console.log(val);
    },
    // 房型选择
    getRoomSelect(o) {
      this.page = "";
      this._getRoomSelect();
    },
    //获取表格数据
    _getRoomSelect() {
      getRoomSelect({
        startTime: this.page == "2" ? this._startTime : this.startTime,
        roomId: this.roomId,
        page: this.page
      }).then(res => {
        this.roomHeadList = res.data.roomHeadList;
        this.roomSumList = res.data.roomSumList;
        this.roomSum = res.data.roomSum;
        this.maintainList = res.data.maintainList;
        this.nowRentList = res.data.nowRentList;
        this.setoutRentList = res.data.setoutRentList;
        this._formatCount();
      });
    },
    // 获取下拉数据
    _getRoomSelectType() {
      getRoomSelectType().then(res => {
        this.roomSelectType = res.data.roomTypeList;
      });
    },
    // 上一页
    pre() {
      this.page = "1";
      this.startTime = this.dateHandleList[0];
      this._getRoomSelect();
    },
    // 下一页
    next() {
      this.page = "2";
      this._startTime = this.dateHandleList[this.dateHandleList.length - 1];
     
      this._getRoomSelect();
    }
  },
  computed: {
    _isClisk() {
      var dd = new Date();
      dd.setDate(dd.getDate() + 3); //获取AddDayCount天后的日期
      return this.dateHandleListTamp[0] < dd.getTime();
    }
  },
  created() {
    this._getRoomSelect();
    this._getRoomSelectType();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  table {
    border-collapse: collapse;
    text-align: center;
  }
  tr.style {
    background: #f2f2f2;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
    width: auto;
    padding: 0 20px;
    &.style {
      background: #f2f2f2;
    }
  }
}
</style>